/* 学习目标：useEffect-第二个参数，使用说明  */
// 1. []：  挂载后
// 2. [依赖项]：  挂载、更新二合一后
// 3. 不写：👎👎  挂载、更新二合一后

import { useEffect, useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('hello react');

  // 2. [依赖项]： 只会监听依赖项的变化
  useEffect(() => {
    console.log('我会在数据变化时,自动执行  ----->  ', count);
    document.title = count;
  }, [count]);

  // 3. 不写：👎👎 会监听所有数据💥💥的变化， 容易造成性能浪费和卡顿
  useEffect(() => {
    console.log('我会在数据变化时,自动执行  ----->  ', count);
    document.title = count;
  });

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>++</button>
      <hr />
      <h1>{msg}</h1>
      <button onClick={() => setMsg(msg + '~')}>+~</button>
    </div>
  );
}
